import React, {Component} from 'react';
import {inject, observer} from "mobx-react";
import {Button, InputItem, List, WhiteSpace, WingBlank} from "antd-mobile";
import {UserInfoStore} from "../store";
import MyCopper from "../../../util-biz/copper";

interface IUserFormProps {
  userInfoStore?: UserInfoStore | any;
}

@inject('userInfoStore')
@observer
export default class UserForm extends Component<IUserFormProps, any> {

  render() {
    const {
      userInfo,
      updateUserNickName,
      updateUserPhone,
      updateUserPhoto,
      updateUserInfo,
      submitBtnStatus,
    } = this.props.userInfoStore;
    if (!userInfo) {
      return null;
    }
    return (
      <>
        <List.Item>头像<span className="picTip">(jpg/jpeg/png格式)</span></List.Item>
        <div style={{paddingLeft: 7}}>
          <MyCopper type="2" files={userInfo.userPhoto?[{url: userInfo.userPhoto}]:[]} min={1} max={1} onSubmit={updateUserPhoto} onRemove={() => updateUserPhoto(null)}/>
        </div>

        <InputItem
          placeholder="请输入昵称(15字以内)"
          value={userInfo.userNickName}
          onChange={updateUserNickName}
          clear
          maxLength={15}
        >用户昵称</InputItem>

        <InputItem
          placeholder="请填写手机(11位)"
          value={userInfo.userPhone}
          onChange={updateUserPhone}
          clear
          maxLength={11}
        >用户手机</InputItem>

        <WhiteSpace/>

        <WingBlank>
          <Button
            type="primary"
            loading={submitBtnStatus === 3}
            onClick={updateUserInfo}
          >
            提交
          </Button>
        </WingBlank>

        <WhiteSpace/>
      </>
    );
  }

}
